﻿@{
    string type = ViewBag.Type;
}
<link href="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/menu/jeasyui.extensions.menu.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.columnToggle.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.groupSummary.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false,title:'该 datagrid 控件已经开启显示 表头右键菜单 和 表头点击菜单，菜单中会提供“列分组汇总”的功能'">
    <table id="dg1"></table>
</div>

<script>
    $(function () {
        var type = "@type";
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'AreaName', title: '地区', width: 150, filterable: false });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal = [
                { field: 'Sex1', title: '男', width: 90, filterable: true, sortable: true, calcable: true },
                { field: 'Sex2', title: '女', width: 90, calcable: true, formatter: function (val) { return val + "个"; } },
                { field: 'TS1', title: '类型', width: 80, hidable: false }
            ];
            result.push(normal);

            return result;
        };
        var options = {
            idField: "ID",
            rownumbers: true,
            remoteSort: false,
            fit: true,
            border: false,
            singleSelect: true,
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-common-data2.json",
            toolbar: [
                {
                    text: "切换为" + (type == "local" ? "后台分页" : "本地不分页") + "数据的datagrid", iconCls: "icon-edit", handler: function () {
                        window.location.href = "/Datagrid/GroupSummaryDemo?type=" + (type == "local" ? "remote" : "local");
                    }
                }
            ],
            enableHeaderContextMenu: true,
            enableHeaderClickMenu: true,
            enableGroupSummary: { enable: true, mode: type, ignoreFormatter: false }
        };
        if (type == "remote") {
            options.method = "post";
            options.url = "/Datagrid/GetDataGridJson";
            options.pagination = true;
        }
        $("#dg1").datagrid(options);
    });
</script>
